<template>

	<div id="download-dev" v-show="show">
		<h4>
			<span>【${dinfo.process + (dinfo.pu || '')}】</span>
			<span>【${dinfo.size.toFixed(2) + (dinfo.su || '')}】</span>
			<span>【${dinfo.name}】 </span>`;
		</h4>
		<div class="empty">
			<div class="full" :style="`width:${dinfo?.process||0}%`"></div>
		</div>
	</div>

</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		toRefs,
		onBeforeUnmount,
		onUnmounted,
		onMounted,
		nextTick,
	} from "vue";



	//事件抛出
	//外层绑定@onFn="hOnFn"
	//触发hEmit('onFn', t);
	const hEmit = defineEmits(['hCallOut', 'onChange']);

	//参数设置	 
	const props = defineProps({
			datMods: {
				type: Array
			},
			dinfo: {
				type: Number
			}
		}),
		show = ref(false);
	let h = -1;
	watch(props, pro => {
		if (pro.dinfo?.process == 100) {
			clearTimeout(h);
			h = setTimeout(() => {
				show.value = false;
			}, 500);
		} else {
			show.value = true;
		}
	});
	const hCallIn = {

	}
	defineExpose({
		hCallIn,
	});

	onBeforeUnmount(() => {
		//scene.instance?.hFree();
		//	console.log("退出前");
	});
	onUnmounted(() => {
		//scene.instance = null;
	});

	onMounted(() => nextTick(() => {
  
	}));
</script>

<style scoped lang="scss">
	#download-dev {
		height: 80px;
		position: absolute;
		bottom: 0;
		width: 30vw;
		left: 35vw;
		background-image: url(/imgs/loadingBg.png);
		color: #333639;
		padding: 0 1.5vw;
		display: none;
		align-content: center;
		flex-direction: column;
		justify-content: center;
		letter-spacing: 3px;
		z-index: 10000;
		font-size: 12px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	#download-dev h4 {
		margin-bottom: 7px;
		margin-top: 0px;
		display: flex;
		justify-content: center;
	}

	#download-dev h4>* {
		width: 130px;
	}

	#download-dev h4>span:last-child {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#download-dev .empty {
		height: 10px;
		overflow: hidden;
		background-image: url(/imgs/LoadC.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		padding: 4px 3px;
	}

	#download-dev .full {
		background: linear-gradient(-90deg, #333639 0%, #838383 100%);
		border-radius: 4px;
		width: 0%;
		height: 100%;
	}
</style>